<template>
  <div class="header">
    <div class="page-title" style="margin-bottom:20px;">系统设置</div>
    <el-tabs v-model="activeTabName" @tab-click="handleClick">
      <el-tab-pane label="套餐管理" name="first">
        <el-form ref="form"  label-width="80px">
          <el-form-item :label="'套餐'+(key+1)" :key="key" v-for="(item,key) in packages">
            <el-input @change="changePrice(key, 1)" v-model="item.price" style="margin-right:10px;width:60px"></el-input>元，赠送 <el-input @change="changePrice(key, 2)" style="margin:0 10px;width:60px" v-model="item.send_price"></el-input>元
            <i class="el-icon-delete" style="margin-left:10px;color:#f00;cursor:pointer" @click="deletePackage(item.id)"></i>
          </el-form-item>
          <el-form-item label="">
            <el-button @click="addPackage">增加</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { request_package_list, request_package_create, request_package_update, request_package_delete } from "@/util/api";
export default {
  name: "SeekType",
  data() {
    return {
      form: [],
      activeTabName: 'first',
      packages:[],
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  components: {

  },
  methods: {
    init() {
      this.getPackageList()
    },

    // 获取套餐列表
    getPackageList() {
      request_package_list()
          .then((res) => {
            const result = res.data;
            if (result.code == 200) {
              this.packages = result.data.data;
            }
          })
    },
    // 增加套餐
    addPackage() {
      let [defaultPrice, defaultSendPrice] = [1, 0];
      request_package_create({
        price:defaultPrice,
        send_price:defaultSendPrice
      }).then((res) => {
        this.packages.push({price:defaultPrice,send_price:defaultSendPrice,id:res.data.data.id})
      })
    },
    changePrice(key) {
      let [id, price, send_price] = [this.packages[key].id, this.packages[key].price, this.packages[key].send_price]
      request_package_update({id,price,send_price});
    },
    // 删除
    deletePackage(id) {
      this.$confirm("此操作将永久删除，是否继续？", "系统提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
          .then(() => {
            request_package_delete({
              id: id,
            })
                .then((res) => {
                  const result = res.data;
                  if (result.code == 200) {
                    this.$message.success({
                      message: "删除成功！",
                      offset: 70,
                    });
                    this.getPackageList()
                  } else {
                    this.$message.error({
                      message: result.message,
                      offset: 70,
                    });
                  }
                })
                .catch();
          })
    },
  },
};
</script>

<style scoped  lang="less">
</style>